// 导入Tailwind CSS
@tailwind utilities;

// 导入字体
@font-face {
  font-family: 'Inter';
  src: url('~@/assets/fonts/Inter-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('~@/assets/fonts/Inter-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Inter';
  src: url('~@/assets/fonts/Inter-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

// 基础变量
:root {
  --primary-color: #165DFF;
  --secondary-color: #36BFFA;
  --accent-color: #FF7D00;
  --text-color: #333;
  --text-light: #666;
  --text-lighter: #999;
  --bg-light: #F5F7FA;
  --bg-lighter: #F9FAFC;
  --border-color: #E5E6EB;
  --highlight-color: #FFF7E6;
  --medical-blue: #E8F3FF;
  --medical-green: #E8FFF3;
  --medical-red: #FFF3F3;
  --medical-yellow: #FFF7E6;
  --medical-purple: #F9F0FF;
  --medical-indigo: #F0F5FF;
  --medical-pink: #FFF0F6;
  --medical-teal: #E6FFFB;
  --medical-orange: #FFF7E6;
}

// 暗黑模式变量
.dark {
  --text-color: #E5E6EB;
  --text-light: #A9ABB8;
  --text-lighter: #6E7687;
  --bg-light: #1D2129;
  --bg-lighter: #272E3B;
  --border-color: #303846;
  --highlight-color: #303846;
  --medical-blue: #2B3445;
  --medical-green: #2A3633;
  --medical-red: #362C2C;
  --medical-yellow: #33302A;
  --medical-purple: #332E38;
  --medical-indigo: #2E3345;
  --medical-pink: #382E34;
  --medical-teal: #2E3836;
  --medical-orange: #33302A;
}

// 全局样式
body {
  font-family: 'Inter', 'SimSun', sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-light);
  transition: background-color 0.3s ease;
}

// 编辑器容器
.editor-container {
  @apply min-h-screen p-6 md:p-8;
  
  .max-w-4xl {
    @apply mx-auto;
  }
}

// Slate编辑器样式
.slate-editor {
  @apply bg-white dark:bg-bg-lighter rounded-lg shadow-sm p-6 border border-border-color;
  
  h1, h2, h3, h4, h5, h6 {
    @apply font-bold mb-2;
  }
  
  h1 {
    @apply text-2xl;
  }
  
  h2 {
    @apply text-xl;
  }
  
  h3 {
    @apply text-lg;
  }
  
  p {
    @apply mb-3;
  }
  
  ul, ol {
    @apply mb-3 pl-5;
  }
  
  ul {
    @apply list-disc;
  }
  
  ol {
    @apply list-decimal;
  }
  
  blockquote {
    @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic my-4;
  }
  
  code {
    @apply bg-gray-100 dark:bg-gray-700 px-1 py-0.5 rounded text-sm;
  }
}

// 医疗章节样式
.medical-section {
  @apply mb-6 p-4 rounded-lg border;
  
  h3 {
    @apply font-semibold mb-2;
  }
  
  &.chief-complaint {
    @apply border-blue-200 bg-medical-blue text-blue-800 dark:border-blue-500 dark:text-blue-300;
  }
  
  &.present-illness {
    @apply border-blue-200 bg-medical-blue text-blue-800 dark:border-blue-500 dark:text-blue-300;
  }
  
  &.past-medical-history {
    @apply border-green-200 bg-medical-green text-green-800 dark:border-green-500 dark:text-green-300;
  }
  
  &.family-history {
    @apply border-purple-200 bg-medical-purple text-purple-800 dark:border-purple-500 dark:text-purple-300;
  }
  
  &.physical-exam {
    @apply border-yellow-200 bg-medical-yellow text-yellow-800 dark:border-yellow-500 dark:text-yellow-300;
  }
  
  &.diagnosis {
    @apply border-red-200 bg-medical-red text-red-800 dark:border-red-500 dark:text-red-300;
  }
  
  &.treatment-plan {
    @apply border-indigo-200 bg-medical-indigo text-indigo-800 dark:border-indigo-500 dark:text-indigo-300;
  }
  
  &.medication {
    @apply border-pink-200 bg-medical-pink text-pink-800 dark:border-pink-500 dark:text-pink-300;
  }
  
  &.laboratory-test {
    @apply border-teal-200 bg-medical-teal text-teal-800 dark:border-teal-500 dark:text-teal-300;
  }
  
  &.imaging-study {
    @apply border-orange-200 bg-medical-orange text-orange-800 dark:border-orange-500 dark:text-orange-300;
  }
}

// 医学术语样式
.medical-term {
  @apply bg-yellow-100 dark:bg-yellow-900/30 px-1 rounded text-primary-color cursor-help relative;
  
  &:hover::after {
    content: attr(data-tooltip);
    @apply absolute bottom-full left-0 bg-gray-800 text-white text-xs px-2 py-1 rounded mb-1 whitespace-nowrap z-10 opacity-0 transition-opacity duration-200 pointer-events-none;
    opacity: 1;
  }
}

// 参考文献样式
.reference {
  @apply text-xs text-blue-500 dark:text-blue-400 sup cursor-pointer;
  
  &:hover {
    @apply underline;
  }
}

// 树形导航样式
.document-tree {
  @apply bg-white dark:bg-bg-lighter rounded-lg shadow-sm p-4 border border-border-color sticky top-6 h-[calc(100vh-3rem)] overflow-y-auto;
  
  ul {
    @apply space-y-1;
  }
  
  li {
    @apply px-3 py-2 rounded-md cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors;
    
    &.active {
      @apply bg-primary/10 dark:bg-primary/20 text-primary;
    }
    
    .section-count {
      @apply text-xs text-text-lighter ml-1;
    }
  }
}

// 右侧属性面板
.properties-panel {
  @apply bg-white dark:bg-bg-lighter rounded-lg shadow-sm p-4 border border-border-color sticky top-6 h-[calc(100vh-3rem)] overflow-y-auto;
  
  .stats-card {
    @apply bg-gray-50 dark:bg-gray-700 p-3 rounded-lg mb-4;
    
    .title {
      @apply font-medium text-text-light mb-1;
    }
    
    .value {
      @apply text-xl font-bold;
    }
  }
  
  .term-item {
    @apply flex justify-between items-center p-2 border-b border-border-color last:border-0;
    
    .count {
      @apply bg-primary/10 text-primary px-2 py-0.5 rounded text-xs;
    }
  }
}

// 滚动条样式
::-webkit-scrollbar {
  @apply w-2 h-2;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-700 rounded;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 dark:bg-gray-600 rounded hover:bg-gray-400 dark:hover:bg-gray-500;
}

// 响应式设计
@media (max-width: 1024px) {
  .editor-container {
    @apply p-4;
  }
  
  .document-tree, .properties-panel {
    @apply hidden;
  }
}